<template>
     <el-container>
    <el-header style="text-align: left;flex-direction: row;display: flex;align-items: center; font-size: 12px">
      <el-button type="primary" @click="FormVisible = true">新建固件</el-button>
        <el-form :inline="true" style="display: flex;flex-direction: row; margin-left: 10px;" class="demo-form-inline">


            <el-form-item>
                <el-input v-model="serch" placeholder="请输入搜索项目名称"></el-input>
                <el-button icon="el-icon-search"   circle ></el-button>
            </el-form-item>
        </el-form>

    </el-header>
    
    <el-main>
      <el-table :data="tableData" :cell-style="serchclick">
        <el-table-column  label="序号" width="100">
            <template slot-scope="scope">
                {{scope.$index+1}} 
             </template>
        </el-table-column>
        <el-table-column prop="name" label="固件名称">
        </el-table-column>
        <el-table-column prop="url" label="备注">
          <template slot-scope="scope">
              <el-link type="primary" :href="scope.row.url">{{scope.row.url}}</el-link>
          </template>
          
        </el-table-column>
        <el-table-column prop="version" label="新版本号">
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" >
        </el-table-column>
        <el-table-column  fixed="right" label="操作" >
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="updateProj(scope.row.condition,scope.row.id,scope.row.name)" >编辑</el-button>
                <el-button type="danger" size="small" @click="delProj(scope.row.id)" >删除</el-button>
             </template>
        </el-table-column>
      </el-table> 
    </el-main>


     <el-dialog title="新建固件" :visible.sync="FormVisible">
          <el-form :model="form" >

              
            <el-form-item  label="文件上传："  size = 'small' >
             <el-upload
                class="upload-demo"
                ref="upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :limit="1"
                :on-change="changFile"
                :on-exceed="handleExceed"
                :file-list="fileList" 
                :auto-upload="false">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>

            </el-form-item>

              <el-form-item label="固件名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="新版本号" :label-width="formLabelWidth">
              <el-input  v-model="form.version" autocomplete="off"></el-input>
              </el-form-item>
                <el-form-item label="是否允许升级" :label-width="formLabelWidth">
              <el-switch
                    v-model="isUpdate"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
               <el-form-item label="是否允许全产品升级" :label-width="formLabelWidth">
              <el-switch
                    v-model="allIsUpdate"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
              <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input type="textarea"  v-model="form.desc" autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="FormVisible = false">取 消</el-button>
              <el-button type="primary" @click="formSubmit">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog :title="updateFormName" :visible.sync="updateFormVisble">
             <el-form :model="updateForm" >
                <el-form-item label="是否允许升级" :label-width="formLabelWidth">
              <el-switch
                    v-model="updateForm.isUpdate"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
               <el-form-item label="是否允许全产品升级" :label-width="formLabelWidth">
              <el-switch
                    v-model="updateForm.allIsUpdate"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="updateFormVisble = false">取 消</el-button>
              <el-button type="primary" @click="updateFormSubmit">确 定</el-button>
          </div>
        </el-dialog>


  </el-container>


    

</template>

<script>
    import {Axios} from "../../../static/util";

    export default {
        name:"pl",
        methods:{
            changFile(file, fileList) {
              console.log(fileList);
              //选择文件后，给fileList对象赋值
              this.fileList = fileList;
            },
            handleExceed(files, fileList) {
              this.$message.warning('当前限制最多选择 1 个文件');
            },
            formSubmit() {

              let self = this;
              self.form.condition =  self.isUpdate ? (self.allIsUpdate ? 1 : 2) : 0;
              self.form.project_id = self.$route.query.key;
              let data = new FormData();

              // todo 非常重要，一定要加file.raw，从浏览器中查看需要使用binary类型，后台才能正确接收
              this.form.files = this.fileList[0].raw
              console.log(this.fileList[0].raw)
              

              // 将form表单中的值都赋值给FormData传递给后台
              for(let key in this.form){
                console.log(this.form[key])
                data.append(key,this.form[key])
              }

              
              Axios(
                'post',
                'http://127.0.0.1:5000/project/upgrade',
                data,
                (res)=>{
                if (res.data.code != "200"){
                    this.$message.warning('错误:'+res.data.msg);
                    
                }else{
                  console.log(res);
                  this.$router.go(0);
                }
                  
              },{},self.$cookies.get('_token'));
            },

            serchclick({row,colnum,rowIndex,columnIndex}){
            //   console.log(1,this.serch,row['productname']);
                if((! row['name'].includes(this.serch)) && this.serch != '' ){
                    return 'display:none';
                }
                
            },
            delProj(id){
                Axios(
                    'post',
                    'http://127.0.0.1:5000/project/upgrade/del',
                    {id:id},
                    (res)=>{
                        if (res.data.code != "200"){
                             this.$message.warning('错误:'+res.data.msg);
                            
                        }else{
                          console.log(res);
                          this.$router.go(0);
                        }
                    }

                );
            },
            updateProj(c,id,name){

                switch(c){
                  case 0:{
                    this.updateForm.isUpdate=false;
                    this.updateForm.allIsUpdate=false;
                    break;
                  }
                  case 1:{
                    this.updateForm.isUpdate=true;
                    this.updateForm.allIsUpdate=true;
                    break;
                  }
                  case 2:{
                     this.updateForm.isUpdate=true;
                     this.updateForm.allIsUpdate=false;
                     break;
                  }
                  default :{
                     this.$message.warning('condition error:'+c);
                     return
                  }
                  

                }
                this.updateFormName = name;
                this.updateFormVisble = true;
                this.updateId = id;
            },
            updateFormSubmit(){
                //////////////////更新固件
                let condition = 0;
                if(this.updateForm.isUpdate){
                    if(this.updateForm.allIsUpdate){
                        condition = 1;
                    }else{
                        condition = 2;
                    }
                }
                console.log(condition)
                 Axios(
                    'post',
                    'http://127.0.0.1:5000/project/upgrade/edit',
                    {id:this.updateId,condition:condition},
                    (res)=>{
                        if (res.data.code != "200"){
                             this.$message.warning('错误:'+res.data.msg);
                            
                        }else{
                          this.$message.info(res.data.msg);
                          this.$router.go(0);
                        }
                    },{},self.$cookies.get('_token')

                );
            }
        },
        data() {
            return {
                tableData: [
                  {
                      "id": 1,
                      "name": "zzz",
                      "desc": "dqwdawd1q2wdas",
                      "key": "e21edawsdq2w",
                      "created_at": "2022-07-01 15:14:59",
                      "updated_at": "2022-07-01 15:14:59"
                  }
              ],
                serch: '',
                
                formLabelWidth: '120px',
                FormVisible: false,
                updateFormVisble: false,
                updateFormName:'',
                fileList:[],
                isUpdate: false,
                allIsUpdate: false,
                form: {
                    file: '',
                    project_id:'',
                    name: '',
                    version: '',
                    condition : false ,
                    desc: '',
                },
                updateForm:{
                    isUpdate: false,
                    allIsUpdate: false,
                }
            }
        },
        created(){
          let self = this;
          self.form.user_id = self.$cookies.get('_uid');
          console.log(self.$route.query.key);


          Axios(
            'get',
            'http://127.0.0.1:5000/project/upgrade',
            {},
            (res)=>{
              console.log(res.data.data);
              self.tableData = res.data.data;
              
            },{'project_id':self.$route.query.key},self.$cookies.get('_token'));

        }

    }
</script>

<style>
 .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  .el-form{
     flex: 1;
  }
  .el-form-item{
   flex: 1;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
   
  }
  .el-form-item__content{
    width: 100%;
     display: flex !important;
    flex-direction: row;
    align-items: center;

  }
  .el-input{
    width: 50%;
    margin-right: 10px;
  }
</style>
